<template>
  <div class="chart-container">
    <div :id="'barChart' + id" class="chart"></div>
    <div class="base-image"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
  id: {
    type: String,
    default: '1',
  },
})
let dataAxis = [
  '点',
  '击',
  '柱',
  '子',
  '或',
  '者',
  '两',
  '指',
  '在',
  '触',
  '屏',
  '上',
  '滑',
  '动',
  '能',
  '够',
  '自',
  '动',
  '缩',
  '放',
]
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]
let yMax = 500
let dataShadow = []
for (let i = 0; i < data.length; i++) {
  dataShadow.push(yMax)
}
let chartDom
let myChart
const option = ref({
  title: {
    text: '特性示例：渐变色 阴影 点击缩放',
    subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom',
  },
  xAxis: {
    data: dataAxis,
    axisLabel: {
      inside: true,
      color: '#fff',
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    z: 10,
  },
  yAxis: {
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#999',
    },
  },
  dataZoom: [
    {
      type: 'inside',
    },
  ],
  series: [
    {
      type: 'bar',
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' },
        ]),
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' },
          ]),
        },
      },
      data: data,
    },
  ],
})
const initChart = () => {
  chartDom = document.getElementById('barChart' + props.id)
  myChart = echarts.init(chartDom)
  option.value && myChart.setOption(option.value)
}
const zoomSize = 6
myChart?.on('click', function (params) {
  console.log('params:', params)
  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
  myChart?.dispatchAction({
    type: 'dataZoom',
    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
  })
})
onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 800px;
  height: 600px;

  .chart {
    width: 100%;
    height: 100%;
  }

  .base-image {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px; // 根据需要调整
    background-image: url('@/assets/images/evaluate-box.png');
    background-size: cover;
  }
}
</style>
